<template>
  <div class="play">
  <div class="content">
    <router-link :to="`/play/${item.id}/${item.name}/${item.artists[0].name}/${setUrl(item.album.blurPicUrl)}`" class="list" v-for="item in playArr" :key="item.id" tag="div">
      <div class="name">{{ item.name }}</div>
<!--      <div>04:16</div>-->
      <div class="artists">{{ item.artists[0].name }}</div>
<!--      {{this.$route.params.id}}-->
    </router-link>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      playArr: []
    }
  },
  methods: {
    getData () {
      this.axios({
        params: {
          id: this.$route.params.id
        },
        url: 'dj/program/detail'
      }).then(res => {
        // console.log(res)
        this.playArr = res.data.program.songs
        // console.log(this.playArr)
      })
    },
    setUrl (url) {
      if (url) {
        return encodeURIComponent(url)
      }
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.play{
  .content{
    background-color: #fff;
    margin: 0 20px;
    padding: 40px 40px;
    .list{
      margin-top: 20px;
      display: flex;
      cursor: pointer;
      .name{
        width: 300px;
      }
      .artists{
        width: 300px;
        margin-left: 300px;
      }
    }
  }
}
</style>
